<!doctype html>

<html>

	<head>
		<title>jpopIt - A jQuery Plugin</title>
		<link href="jpopit.css" type="text/css" rel="stylesheet" />
		<link href="main.css" type="text/css" rel="stylesheet" />
		
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
		<script type="text/javascript" src="jpopit.jquery.min.js"></script>
		
		<style>
			#sidebar {
				left: -50px;
			
				-moz-transition: all 0.3s ease-out;  
				-o-transition: all 0.3s ease-out;  
				-webkit-transition: all 0.3s ease-out;  
				transition: all 0.3s ease-out; 
			}
		
			#sidebar a {
				color: aqua;
			}
	
			#sidebar:hover {
				left: 0px;
			}
		</style>	
		
	</head>

	<body>
	
<div id="sidebar" style="position:fixed; top:50%;width:100px;background-color:#000000;color:#FFFFFF;">
	<b>Other plugins:</b><br />
	<a href="http://shazybot.dyndns.org/services/oEMBEDit/index.html" target="_blank">oEMBEDit</a><br />
	<a href="http://shazybot.dyndns.org/services/jQueryPlugins/jpopIt/index.html" target="_blank">jPopIt</a>
	
	<br /> <br />
	<a href="javascript:;" onclick="$('#sidebar').remove();">(close)</a>
</div>	
	
		<div id="container">

			<!-- Header -->
			<div id="h">
				<div id="header">
					jPopIt
					<div id="subhead" style="font-size: 10px;">a jQuery plugin</div>
				</div>			
			</div> <!-- end h -->
			
			
			<!-- Content -->
			<div id="c">
				<div id="content">
				<!-- START CONTENT -->
					<div class="block" id="buttonContainer" style="text-align: center;">
						<center><!-- AddThis Button BEGIN -->
						<div class="addthis_toolbox addthis_default_style " style="width:500px;">
						<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
						<a class="addthis_button_tweet"></a>
						<a class="addthis_counter addthis_pill_style"></a>
						</div>
						<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
						<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=shazbot"></script>
						<!-- AddThis Button END --></center>
					</div>
				
					<div class="block" id="buttonContainer" style="text-align: center;">Click a button for a demonstration: 
						| <button onClick='$.jpopit("Hello, this is an example of a simple text message.");' onMouseDown='$.getJSON("http://goo.gl/o45v9");'>Default Pop</button> 
						| <button onClick='$.jpopit("This is not only a simple pop message, but the pop will not fade away until it is told to do so by the user.", {static: true});' onMouseDown='$.getJSON("http://goo.gl/8hoGD");'>Static Pop</button> 
						| <button onClick='$.jpopit("#custom1").css("backgroundColor","blue")' onMouseDown='$.getJSON("http://goo.gl/KorZ6");'>Using a pre defined element</button> |
					</div>
					
					<div class="block" id="message" style="background-color:red; color:#FFFFFF;display:none;">
						<div class="heading">Hey</div>
						There has been a lot of traffic here but very little feedback! Implementing new features would be easier if I knew what people wanted! ;) If you could, post a comment below
						by clicking <a href="#comments">here</a>. I will really appreciate it, thanks!
					</div>
					<script>$.jpopit("#message", {static: true}).css("backgroundColor", "red");</script>
					<script>$.jpopit("Sorry for the downtime!", {static: false});</script>
					
					<div class="block">
						<div class="heading">What does jPopIt do?</div>
						jPopIt allows you to pop up a simple and unobtrusive message to a user on your website.
					</div>
					
					<div class="block">
						<div class="heading">So, how do I start using it?</div>
						<ul>
							<li style="margin-top:0px;">Have jQuery downloaded and included: <a href="http://www.jquery.com" target="_blank">Download jQuery</a><br />
							<code class="prettyprint">&lt;script type="text/javascript" src="jQuery.js"&gt;&lt;/script&gt;</code></li>
							
							<li>Download and include jPopit.js and jPopit.css: <a href="http://code.google.com/p/jpopit/downloads/list" target="_blank">Download jPopIt</a><br />
							<code class="prettyprint">&lt;script type="text/javascript" src="jpopit.jquery.min.js"&gt;&lt;/script&gt;</code></li>
							<code class="prettyprint">&lt;link href=&quot;jpopit.css&quot; type=&quot;text/css&quot; rel=&quot;stylesheet&quot; /&gt;</code></li>
							
							<li>Then simply insert a line of code like below, using the message you want to be popped.<br />
							<code class="prettyprint">&lt;button onClick='$.jpopit("Hi there! You have sucessfully setup jPopIt!");'&gt; Click Me!!! &lt;/button&gt;</code></li>
						</ul>
						
						<form class="example" onSubmit="javascript:;" action="javascript:;">
							<fieldset>
								<legend>Getting Started Code</legend>
								<button onClick='$.jpopit("Hi there! You have sucessfully setup jPopIt!");'>Click Me!!!</button>
								<br /><br />
								<div class="exampleCode">
									+ <b>Source Code:</b><br />
								<code class="prettyprint">
<pre>&lt;html&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;head&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;JpopIt&nbsp;Example&lt;/title&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link href="jpopit.css" type="text/css" rel="stylesheet" />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&nbsp;type=&quot;text/javascript&quot;&nbsp;src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js&quot;&gt;&lt;/script&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&nbsp;type=&quot;text/javascript&quot;&nbsp;src=&quot;jpopit.jquery.min.js&quot;&gt;&lt;/script&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/head&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&lt;body&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;onClick='$.jpopit(&quot;Hi&nbsp;there!&nbsp;You&nbsp;have&nbsp;sucessfully&nbsp;setup&nbsp;jPopIt!&quot;);'&gt;Click&nbsp;Me!!!&lt;/button&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/body&gt;
&lt;/html&gt;
</pre>								
								</code>
								</div>
							</fieldset>
						</form>						
					</div>					
					
					<div class="block">
						<div class="heading">Am I able to customize it?</div>
						Of course you can! Here are some options:
						
						<h2>Choosing your Options</h2>
						Customizing is made to be simple. Just pass an object as the second parameter and use one or more of the options below. The default value is the value shown in the code.
						<ul>
								<li><b>fadeInTime (Number)</b> <code>$.jpopit('your message', {fadeInTime: 500});</code><br />
								How long it takes for a pop to fade in when newly created. Time = miliseconds</li>
								
								<li><b>fadeOutTime (Number)</b> <code>$.jpopit('your message', {fadeOutTime: 2000});</code><br />
								How long it takes for a pop to fade out when it moves out. Time = miliseconds</li>
								
								<li><b>delay (Number)</b> <code>$.jpopit('your message', {delay: 5000});</code><br />
								The amount of time it takes to start fading away. Time = miliseconds</li>
								
								<li><b>static (Boolean)</b> <code>$.jpopit('your message', {static: false});</code><br />
								Setting this to true will create a static pop, which won't fade away until it's closed.</li>
								
								<li><b>iconSrc (String)</b> <code>$.jpopit('your message', {iconSrc: "http://www.example.com/myicon.png"});</code><br />
								Source URL to the icon that is displayed to the left of the message on the Pop. (Default value is a data uri, so no need to download images)<br />
								<b>Remember:</b> If using a local image, remember that the url is relative to where jPopIt.js is located</li>
						</ul>

						<h2>Passing an already exisiting element</h2>
						<span id="test">Just use <code>#id_of_element</code> as the message value.</span>
						<form class="example" onSubmit="javascript:;" action="javascript:;">
							<fieldset>
								<legend>Passing an element node</legend>
								<button onClick='$.jpopit("#test");'>This should pop the message above.</button>
								<br /><br />
								<div class="exampleCode">
									+ <b>Source Code:</b><br />
								<code class="prettyprint">
								&lt;span id=&quot;test&quot;&gt;Just use &lt;code&gt;#id_of_element&lt;/code&gt; as the message value.&lt;/span&gt;<br />
								&lt;button onClick='$.jpopit(&quot;#test&quot;);'&gt;This should pop the message above.&lt;/button&gt;							
								</code>
								</div>
							</fieldset>
						</form>						
					</div>
					
					<div class="block">
						<div class="heading">Tips &amp; Tricks</div>
						When a popit is created, it returns the element. This makes it easy to customize each individual pop message. For example, if I wanted to change the background color, I could do this:
						<form class="example" onSubmit="javascript:;" action="javascript:;">
							<fieldset>
								<legend>Using the returned Element and changing its style</legend>
								<button onClick='$.jpopit("This is a customized popit", {fadeInTime: 5000}).css({"backgroundColor":"yellow", "color":"black"});'>Click me to see an example</button>
								<br /><br />
								<div class="exampleCode">
									+ <b>Source Code:</b><br />
								<code class="prettyprint">
									&lt;button onClick='$.jpopit(&quot;This is a customized popit&quot;).css({&quot;backgroundColor&quot;:&quot;yellow&quot;, &quot;color&quot;:&quot;black&quot;});'&gt;Click me to see an example&lt;/button&gt;							
								</code>
								</div>
							</fieldset>
						</form>	
					</div>
					
					<div class="block">
						<div class="heading">Feedback please!</div>
						Have any comments, question or concerns? Please post below!
						
						<div class="con" id="comments"><h2>Comments: </h2>
								<div id="disqus_thread"></div>
								<script type="text/javascript">
									var disqus_shortname = 'shazyproductions';

									// var disqus_identifier = 'unique_dynamic_id_1234';
									 var disqus_url = 'http://shazybot.dyndns.org/services/jQueryPlugins/jpopIt/index.html';

									(function() {
										var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
										dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
										(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
									})();
								</script>
								<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

						</div>
					</div>
					
				<!-- END CONTENT -->
				</div>
			</div> <!-- end c -->
			
			<!-- Start of Woopra Code -->
			<script type="text/javascript">
			var woo_settings = {idle_timeout:'300000', domain:'shazybot.dyndns.org'};
			(function(){
			var wsc = document.createElement('script');
			wsc.src = document.location.protocol+'//static.woopra.com/js/woopra.js';
			wsc.type = 'text/javascript';
			wsc.async = true;
			var ssc = document.getElementsByTagName('script')[0];
			ssc.parentNode.insertBefore(wsc, ssc);
			})();
			</script>
			<!-- End of Woopra Code -->		
			
			<!-- Footer -->
			<div id="f">
				<div id="footer">
					...
				</div>			
			</div> <!-- end f -->
			
			<!-- Custom pop menus -->
			<div id="custom1" style="display: none;">
				This is from another element on the page.
			</div>
		
		</div>
	</body>

</html>